<template>
	<view class="guest-welcome">
		<view class="guest-nav" :style="{
			padding: `${top}px 24px 24px`,
		}">
			<view class="brand">
				NineBot
			</view>

		</view>
		<view class="hero-section">
			<view class="hero-content">
				<view class="hero-animation">
					<view class="cycling-icon">
						<up-image src="/static/webp/logo.svg" width="80px" height="80px" shape="circle" />
					</view>
					<view class="path-line"></view>
				</view>
				<view class="hero-title">
					<view class="gradient-text">九号让出行更奇妙</view>
					<view class="subtitle">与志同道合的骑友一起探索世界</view>
				</view>
				<view class="hero-description"> NineBot 是专为骑行爱好者打造的社交平台，在这里你可以参加精彩的骑行活动、 探索美丽的骑行路线、结识志同道合的朋友，记录属于你的骑行故事。
				</view>

				<view class="cta-buttons">
					<view class="primary-cta" @click="Login">
						<view> 立即开始骑行之旅 </view>
					</view>
					<view class="secondary-cta"  @click="Login">
						<view> 已有账号？登录 </view>
					</view>

				</view>

			</view>

		</view>
	</view>
</template>

<script setup>
	const top = uni.getMenuButtonBoundingClientRect().top
	import {
		onShareAppMessage
	} from '@dcloudio/uni-app'
	
	const Login = () => {
		uni.navigateTo({
			url: '/pages/Login'
		})
	}
</script>

<style lang="scss" scoped>
	.guest-welcome {
		min-height: 100vh;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		position: relative;
		overflow: hidden;

		.guest-nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			z-index: 10;

			.brand {
				display: flex;
				align-items: center;
				gap: 12px;
				color: white;
				font-size: 24px;
				font-weight: 700;
			}
		}

		.hero-section {
			padding: 30px 20px 80px;
			text-align: center;
			position: relative;
			z-index: 5;

			.hero-content {
				max-width: 600px;
				margin: 0 auto;

				.hero-animation {
					position: relative;
					margin-bottom: 40px;
					height: 120px;
					display: flex;
					align-items: center;
					justify-content: center;

					.cycling-icon {
						width: 80px;
						height: 80px;
						background: rgba(255, 255, 255, 0.2);
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 36px;
						color: #fbbf24;
						animation: bounce 2s ease-in-out infinite;
						backdrop-filter: blur(10px);
						border: 2px solid rgba(255, 255, 255, 0.3);
						z-index: 5;
					}


					.path-line {
						position: absolute;
						top: 50%;
						left: 0;
						right: 0;
						height: 2px;
						background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.5) 80%, transparent 100%);
						animation: pathMove 3s ease-in-out infinite;
					}

					@keyframes bounce {

						0%,
						100% {
							transform: translateY(0px);
						}

						50% {
							transform: translateY(-10px);
						}
					}

					@keyframes pathMove {
						0% {
							opacity: 0.3;
							transform: scaleX(0.5);
						}

						50% {
							opacity: 1;
							transform: scaleX(1);
						}

						100% {
							opacity: 0.3;
							transform: scaleX(0.5);
						}
					}
				}

				.hero-title {
					margin-bottom: 24px;

					.gradient-text {
						font-size: 24px;
						font-weight: 800;
						background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #ffffff 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						background-clip: text;
						display: block;
						margin-bottom: 8px;
					}

					.subtitle {
						margin-top: 48px;
						font-size: 16px;
						color: rgba(255, 255, 255, 0.9);
						font-weight: 400;
					}
				}

				.hero-description {
					font-size: 14px;
					color: rgba(255, 255, 255, 0.8);
					line-height: 1.6;
					margin-bottom: 40px;
					max-width: 500px;
					margin-left: auto;
					margin-right: auto;
				}

				.cta-buttons {
					display: flex;
					flex-direction: column;
					gap: 16px;
					align-items: center;
					padding: 0 20px;

					.primary-cta {
						display: flex;
						align-items: center;
						gap: 12px;
						padding: 16px 32px;
						border-radius: 50px;
						font-weight: 600;
						font-size: 14px;
						cursor: pointer;
						transition: all 0.3s ease;
						border: none;
						min-width: 280px;
						justify-content: center;
						background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
						color: white;
						box-shadow: 0 8px 25px rgba(251, 191, 36, 0.4);
					}

					.secondary-cta {
						display: flex;
						align-items: center;
						gap: 12px;
						padding: 16px 32px;
						border-radius: 50px;
						font-weight: 600;
						font-size: 14px;
						cursor: pointer;
						transition: all 0.3s ease;
						border: none;
						min-width: 280px;
						justify-content: center;
						background: rgba(255, 255, 255, 0.1);
						color: white;
						border: 2px solid rgba(255, 255, 255, 0.3);
						backdrop-filter: blur(10px);
					}
				}
			}
		}


	}
</style>